<!doctype html>
<html lang="ja">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="stylesheets/html5.css">
		<script src="javascripts/jquery-1.4.2.min.js"></script>
		<!--[if IE]><script src="./javascripts/ie.js"></script><![endif]-->
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			.ball {
				border: 1px solid black;
				background: #c63939;
				position: absolute;
				width: 10px;
				height: 10px;
				-webkit-border-radius: 5px;
				border-radius: 5px;
			}
			#mesg{
				font-weight: bold;
				color: red;
			}
		</style>
		
		<script>
		<!--
		var ball = null;
		var initPos = {x: 0, y :0, ts: 0};
		var finPos = {x: 0, y :0, ts: 0};
		
		
		// 初期化
		function init() {
			document.addEventListener("touchstart", start, false);
			document.addEventListener("touchmove", move, false);
			document.addEventListener("touchend", end, false);
		}
		
		function start(event){
			$('#x').html(event.touches[0].pageX);
			$('#y').html(event.touches[0].pageY);
			
			if(ball) {
				document.body.removeChild(ball);
				ball = null;
			}
			ball = document.createElement('div');
			ball.setAttribute('class', 'ball');
			ball.style.left = parseInt(event.touches[0].pageX) - 5 + 'px';
			ball.style.top = parseInt(event.touches[0].pageY) - 5 + 'px';
			
			initPos.x = parseInt(event.touches[0].pageX) - 5;
			initPos.y = parseInt(event.touches[0].pageY) - 5;
			initPos.ts = new Date().getTime();
			
			document.body.appendChild(ball);
			event.preventDefault();
		}
		
		function end(event) {
			var interval = finPos.ts - initPos.ts;
			$('#interval').html(interval);
			event.preventDefault();
			
			if(initPos.x != finPos.x && initPos.y != finPos.y) {
				var deltaX = initPos.x - finPos.x;
				var deltaY = initPos.y - finPos.y;
				
				
				if( ( Math.abs(deltaX) > 100 ||  Math.abs(deltaY) > 100 ) && interval < 750) {
					var direction = '';
					
					if(Math.abs(deltaX) >= Math.abs(deltaY))
						direction = deltaX > 0 ? 'left' : 'right';
					else
						direction = deltaY > 0 ? 'up' : 'down';
					
					$("#direction").html(direction);
					console.log(direction+":"+deltaX+","+deltaY);
					send(direction);
				} else {
					$("#direction").html('');
				}
			}
			initProp();
		}
		
		function initProp(){
			initPos = {x : 0, y : 0, ts: 0};
			finPos = {x : 0, y : 0, ts: 0};
		}
		
		function move(event) {
			$('#x').html(event.touches[0].pageX);
			$('#y').html(event.touches[0].pageY);
			if (ball) {
				ball.style.left = parseInt(event.touches[0].pageX) - 5 + 'px';
				ball.style.top = parseInt(event.touches[0].pageY) - 5 + 'px';
			}			
			finPos.x = parseInt(event.touches[0].pageX) - 5;
			finPos.y = parseInt(event.touches[0].pageY) - 5;
			finPos.ts = new Date().getTime();
			event.preventDefault();
		}
		
		function send(ev) {
			if (ev.match(/^(left|right|up|down)$/)) {
				$.ajax({
					type: 'POST',
					url: '../cgi/iphoneif.py',
					data: 'event='+ev,
					success: function(msg){
						$('#mesg').html(msg).fadeIn();
						setTimeout(function(){
							$('#mesg').fadeOut();
						}, 1000);
					}
				});
			}
		}
		// -->
		</script> 
	</head>
	<body onload="init();">
		<div id="content">
			<sapn id=x></sapn>, <span id=y></span><br />
			flip : <span id=direction></span>
			<div id=interval></div>
			<div id=mesg></div>
			
		</div>
	</body>
</html>